<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js" type="text/javascript"charset="utf-8"></script>
    </head>

    <body>
        <!-- view -->
        <div id="app">
            {{ title }}
        </div>


        <script type="text/javascript">
            console.log(Vue)

            // 将div交给vue实例管理，声明式编程
            // let 变量
            // const 常量
            // var 变量， 但是没有作用域，被弃用
            // 好处：数据与界面分离
            let app = new Vue({
                el: "#app",//绑定vue作用的范围
                // model, 定义页面中显示的模型数据
                data: {
                    title: "Hello Vue!"
                }
            })

            // 原始js做法, 命令式编程
            // 1. 创建div元素，设置id属性
            // 2. 定义一个变量title
            // 3. 将message变量放在前面的div中显示

        </script>
    </body>
</html>